<template>
	<view class="friend-list">
		<view class="user-info-container">
			<view class="user-avatar">
				<u-image :src="user.avatars" width="100%" height="100%" border-radius="50%"></u-image>
			</view>
			<view class="user-nickname">
				{{user.nickname}}
			</view>
			<view class="user-invitecode">
				邀请码：{{shareCode}}
			</view>
		</view>
		<view class="friend-list-title">
			邀请3位好友扫码注册即可领取会员
		</view>
		<view class="friend-count">
			<view class="invited-count">
				<text class="label">已邀请</text><text class="count">{{inviteNum}}</text><text class="unit">人</text>
			</view>
			<view class="not-invited-count">
				<text class="label">还差</text><text class="count">{{discrepancyNum}}</text><text class="unit">人</text>
			</view>
		</view>
		<view class="invited-firend-list">
			<view class="invited-firend-item" v-for="item,index in 3" :key="index">
				<view class="invited-firend" v-if="friendList[index]">
					<view class="firend-avatar">
						<u-image :src="friendList[index].avatars" width="100%" height="100%" mode="aspectFill"
							border-radius="50%" />
					</view>
					<view class="firend-nickname">
						{{friendList[index].nickname}}
					</view>
				</view>
				<button class="add-btn" v-else open-type="share">
					<view class="add-icon">
						<i class="iconfont icon-add-consult icon" />
					</view>
					<view class="add-label">
						去邀请
					</view>
				</button>
			</view>
		</view>
		<button @click="toRegister" class="invitation-btn" :disabled="invitationBtnDisabled"
			:class="{'disabled':invitationBtnDisabled}">{{invitationBtnText}}</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				discrepancyNum: 0,
				inviteNum: 0,
				friendList: [],
				user: {
					nickname: '',
					avatars: '',
				}
			}
		},
		mounted() {
			console.log(this.shareCode)
			if (this.shareCode && this.shareCode != 'undefined') {
				this.getInvitedUserNotToken();
			}

		},
		methods: {
			async getInvitedUserNotToken() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getInvitedUserNotToken, {
					share_code: this.shareCode,
				})
				console.log('data>>>>>>>>>>>>>>>>>>', data);
				this.friendList = data.info;
				this.discrepancyNum = data.discrepancy_num;
				this.inviteNum = data.invite_num;
				this.user = data.task_customerinfo;
				// if (!!this.userInfo && this.friendList.some(item => item.customer_id == this.userInfo.id)) {
				// 	this.$emit('showPopup');
				// }
			},
			toRegister() {
				this.$u.route({
					url: `/pages/register/register`,
				})
			}
		},
		computed: {
			invitationBtnDisabled() {
				// return this.friendList.length <= 3;
				return !!this.userInfo
			},
			invitationBtnText() {
				if (!this.userInfo) {
					return '为TA助力'
				} else if (!!this.userInfo && this.friendList.some(item => item.customer_id == this.userInfo.id)) {
					this.$emit('showPopup');
					return '助力成功'
				} else {
					return '您已注册，无法助力'
				}
			},
		},

	}
</script>

<style scoped lang="scss">
	@import "./friendList.scss";
</style>
